<template>
  <a-card :bordered="false">
    <a-card title="分佣配置" size="small" style="margin-bottom:15px;">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="分佣追溯层级：">
                <a-input-number placeholder="" :min="1" v-model="dividerMode.configInfo.traceLevel"
                                style="width:100%;"></a-input-number>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-button type="primary" @click="saveConfig(dividerMode)">保存</a-button>
              </span>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="分佣模式：">
                <a-radio-group v-model="handMode.configInfo" @change="rangeConfig">
                  <a-radio :value="1">返佣</a-radio>
                  <a-radio :value="2">级差</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-button type="primary" @click="saveConfig(handMode)">保存</a-button>
              </span>
            </a-col>
          </a-row>

        </a-form>
      </div>
    </a-card>
    <a-card title="佣金配置" size="small" style="margin-bottom:15px;">
      <div class="table-page-search-wrapper">
        <div style="display:flex;line-height:42px;">
          <div style="flex:1;text-align:center;">-</div>
          <div style="flex:1;text-align:center;" v-for="(item,index) in dataSource" :key="index">
            {{ item.name }}
          </div>
          <div style="flex:1;text-align:center;">奖励名称</div>
        </div>
        <div style="display:flex;line-height:42px;" v-for="(item,index) in dividerDataList.configInfo" :key="index"
             v-if="handMode.configInfo == 1">
          <div style="flex:1;text-align:center;">{{ index + 1 }}级</div>
          <div style="flex:1;text-align:center;"
               v-for="(item1,index1) in dividerDataList.configInfo[index].commissionDataList" :key="index1">
            <span>佣金：</span>
            <a-input-number v-model="dividerDataList.configInfo[index].commissionDataList[index1].rate" :step="1"
                            :precision="2"/>
            <span>%</span>
          </div>
          <div style="flex:1;text-align:center;">
            <a-input style="width:100px;" v-model="dividerDataList.configInfo[index].name"/>
          </div>
        </div>
        <a-row :gutter="24" v-if="handMode.configInfo == 1">
          <a-col :xl="24" :lg="24" :md="24" :sm="24" style="text-align:center;padding-top:20px;">
            <a-button type="primary" @click="saveConfig(dividerDataList)">保存</a-button>
          </a-col>
        </a-row>
        <div style="display:flex;line-height:42px;" v-if="handMode.configInfo == 2">
          <div style="flex:1;text-align:center;">拿货折扣</div>
          <div style="flex:1;text-align:center;"
               v-for="(item2,index2) in rangeDiscount.configInfo.list" :key="index2">
            <a-input-number v-model="rangeDiscount.configInfo.list[index2].discount" :step="1"
                            :precision="2"/>
            <span>折</span>
          </div>
          <div style="flex:1;text-align:center;">
            <a-input style="width:100px;" v-model="rangeDiscount.configInfo.name"/>
          </div>
        </div>
        <a-row :gutter="24" v-if="handMode.configInfo == 2">
          <a-col :xl="24" :lg="24" :md="24" :sm="24" style="text-align:center;padding-top:20px;">
            <a-button type="primary" @click="saveConfig(rangeDiscount)">保存</a-button>
          </a-col>
        </a-row>
      </div>
    </a-card>

  </a-card>
</template>

<script>
import {postAction, getAction} from '@/api/manage'
import {mixinDevice} from '@/utils/mixin'
import {JeecgListMixin} from '@/mixins/MyJeecgListMixin'

export default {
  name: 'HmsHandConfigSet',
  mixins: [JeecgListMixin, mixinDevice],
  components: {},
  data() {
    return {
      description: '分佣配置',
      dividerMode: {
        type: 'dividerMode',//config表对应类型
        value_type: 1,//config表对应配置项数据类型1：json,2:字符串值
        configInfo: {
          traceLevel: 1,
          isMultiple: 1
        }//config表对应配置项数据
      },
      handMode: {
        type: 'handMode',//config表对应类型
        value_type: 3,//config表对应配置项数据类型1：json,2:字符串值
        configInfo: 1//config表对应配置项数据
      },
      rangeDiscount: {
        type: 'rangeDiscount',//config表对应类型
        value_type: 1,//config表对应配置项数据类型1：json,2:字符串值
        configInfo: {} //config表对应配置项数据
      },
      dividerDataList: {
        type: 'dividerDataList',//config表对应类型
        value_type: 1,//config表对应配置项数据类型1：json,2:字符串值
        configInfo: []//config表对应配置项数据
      },
      dividerNameArr: [],
      dictOptions: {},
      isorter: {
        column: 'level',
        order: 'asc',
      },
      url: {
        list: "/mallPlus/hmsHandConfig/list",
        delete: "/mallPlus/hmsHandConfig/delete",
        deleteBatch: "/mallPlus/hmsHandConfig/deleteBatch",
        exportXlsUrl: "/mallPlus/hmsHandConfig/exportXls",
        importExcelUrl: "mallPlus/hmsHandConfig/importExcel",

      },
      columns: []
    }

  },
  created() {
    this.getConfig('dividerMode')
    this.getConfig('handMode')
    this.getConfig('dividerDataList')
    this.getConfig("rangeDiscount")
    this.init()
  },

  methods: {
    init() {
      console.log(this.handMode);
      console.log("fdsfasfdfasdfsafdasf")
    },
    rangeConfig(e) {
      const {value} = e.target
      if (value == 1) {
        this.initData()
      } else if (value == 2) {
        this.initRangeData()
      }
    },
    saveConfig(configObj) {
      let that = this
      let formData = {
        type: configObj.type,
        configInfo: JSON.stringify(configObj.configInfo)
      }
      postAction("/cmsConfig/setConfigByType", formData).then((res) => {
        if (res.success) {
          that.$message.success(res.message)
          if (configObj.type == 'dividerMode') {
            that.initData()
          }
        } else {
          that.$message.warning(res.message)
        }
      })
    },
    getConfig(type) {
      let that = this
      getAction("/cmsConfig/queryConfigByType", {type: type}).then((res) => {
        if (res.success) {
          if (that[type].value_type === 1) {
            that[type].configInfo = JSON.parse(res.result)
          } else if (that[type].value_type === 2) {
            that[type].configInfo = res.result
          } else if(that[type].value_type === 3){
            that[type].configInfo = parseInt(res.result)
            console.log(that[type].configInfo)
            console.log(that[type])
          }
          if (type === 'rangeDiscount' || type === 'dividerDataList') {
            that.loadData()
          }
        } else {
          that.$message.warning(res.message)
        }
      })
    },
    loadData(arg) {
      if (!this.url.list) {
        this.$message.error("请设置url.list属性!")
        return
      }
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1
      }
      var params = this.getQueryParams()//查询条件
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records
          if (this.handMode.configInfo == 1) {
            this.initData()
          } else {
            this.initRangeData()
          }
        }
      })
    },
    initData() {
      let initData = []
      for (let i = 0; i < this.dividerMode.configInfo.traceLevel; i++) {
        if (this.dividerDataList.configInfo.length > i) {
          let initItem = {
            name: this.dividerDataList.configInfo[i].name,
            commissionDataList: []
          }
          for (let j = 0; j < this.dataSource.length; j++) {
            if (this.dividerDataList.configInfo[i].commissionDataList.length > j) {
              let commissionDataItem = {
                level: j + 1,
                rate: this.dividerDataList.configInfo[i].commissionDataList[j].rate
              }
              initItem.commissionDataList.push(commissionDataItem)
            } else {
              let commissionDataItem = {
                level: j + 1,
                rate: 0
              }
              initItem.commissionDataList.push(commissionDataItem)
            }

          }
          initData.push(initItem)
        } else {
          let initItem = {
            name: "分享赚",
            commissionDataList: []
          }
          for (let j = 0; j < this.dataSource.length; j++) {
            let commissionDataItem = {
              level: j + 1,
              rate: 0
            }
            initItem.commissionDataList.push(commissionDataItem)
          }
          initData.push(initItem)
        }

      }
      this.dividerDataList.configInfo = initData
    },
    initRangeData() {
      let initItem = {
        name: this.rangeDiscount.configInfo.name,
        list: []
      }
      for (let j = 0; j < this.dataSource.length; j++) {
        let listItem = {
          level: this.dataSource[j].level,
          discount: 10
        }
        if (typeof (this.rangeDiscount.configInfo.list[j]) != "undefined") {
          listItem = {
            level: this.dataSource[j].level,
            discount: this.rangeDiscount.configInfo.list[j].discount
          }
        }
        initItem.list.push(listItem)
      }

      this.rangeDiscount.configInfo = initItem
    },
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>